<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="auto" size="small">
      <el-form-item label="会议" prop="meetingId">
        <el-select
            v-model="queryParams.meetingId"
            clearable
            filterable
            placeholder="请选择会议"
            style="width: 240px"
            @change="handleQuery"
        >
          <el-option
              v-for="meeting in meetingOptions"
              :key="meeting.meetingId"
              :label="`${meeting.meetingName} - ${meeting.meetingId}`"
              :value="meeting.meetingId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="用户" prop="userId">
        <el-select
            v-model="queryParams.userId"
            clearable
            filterable
            placeholder="请选择用户"
            style="width: 240px"
        >
          <el-option
              v-for="user in userList"
              :key="user.userId"
              :label="`${user.nickName} - ${user.userName}`"
              :value="user.userId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="单位/公司名称" prop="company">
        <el-input
            v-model="queryParams.company"
            clearable
            placeholder="请输入单位/公司名称"
            style="width: 200px"
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input
            v-model="queryParams.phone"
            clearable
            placeholder="请输入手机号码"
            style="width: 180px"
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input
            v-model="queryParams.email"
            clearable
            placeholder="请输入电子邮箱"
            style="width: 200px"
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" size="small" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="receiptList" style="width: 100%">
      <el-table-column align="center" label="主键ID" prop="id" width="80"/>
      <el-table-column align="center" label="会议名称" prop="meetingName" min-width="180"/>
      <el-table-column align="center" label="单位/公司名称" prop="company" min-width="180"/>
      <el-table-column align="center" label="用户" prop="name" width="120"/>
      <el-table-column align="center" label="手机号码" prop="phone" width="150"/>
      <el-table-column align="center" label="电子邮箱" prop="email" min-width="180"/>
      <el-table-column align="center" label="到达方式" prop="arrivalMethod" width="120"/>
      <el-table-column align="center" label="到达车次/航班号" prop="arrivalVehicle" width="180"/>
      <el-table-column align="center" label="到达时间" prop="arrivalTime" width="180">
        <template #default="scope">
          <span>{{ formatDate(scope.row.arrivalTime) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="total"
        @pagination="getList"
    />
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {listReceipt} from "@/api/business/receipt.js"
import dayjs from 'dayjs'
import {listUserInfo} from "@/api/system/user.js"

const userList = ref([])
const meetingOptions = ref([]) // 存储会议选项数据

// 遮罩层
const loading = ref(true)
// 显示搜索条件
const showSearch = ref(true)
// 总条数
const total = ref(0)
// 会议回执表格数据
const receiptList = ref([])
// 查询表单引用
const queryForm = ref(null)
// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  meetingId: null,
  userId: null,
  company: null,
  name: null,
  gender: null,
  phone: null,
  email: null,
  arrivalMethod: null,
  arrivalVehicle: null,
  arrivalTime: null,
})

// 性别格式化
const formatGender = (gender) => {
  const genderMap = {
    '0': '未知',
    '1': '男',
    '2': '女'
  }
  return genderMap[gender] || '未知'
}

const getUserDisplayName = (userId) => {
  const user = userList.value.find(u => u.userId == userId);
  return user ? user.nickName : userId;
};

// 日期格式化
const formatDate = (date) => {
  if (!date) return ''
  return dayjs(date).format('YYYY-MM-DD HH:mm')
}

// 提取会议数据作为选项
const extractMeetingOptions = (data) => {
  const meetingsMap = new Map();
  data.forEach(item => {
    if (item.meetingId && item.meetingName) {
      meetingsMap.set(item.meetingId, {
        meetingId: item.meetingId,
        meetingName: item.meetingName
      });
    }
  });
  return Array.from(meetingsMap.values());
}

/** 查询会议回执列表 */
const getList = async () => {
  loading.value = true;
  try {
    const response = await listReceipt(queryParams.value);
    receiptList.value = response.rows;
    total.value = response.total;
    // 提取会议选项数据
    meetingOptions.value = extractMeetingOptions(response.rows);
  } catch (error) {
    console.error("加载失败:", error);
  } finally {
    loading.value = false;
  }
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryForm.value.resetFields();
  handleQuery();
}

// 加载用户列表
const loadUserList = async () => {
  try {
    const {rows} = await listUserInfo();
    userList.value = rows || [];
  } catch (error) {
    console.error('加载用户列表失败:', error);
    userList.value = [];
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadUserList();
  getList();
});
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
